<template>
  <div class="common-layout">
    <div class="header">
      <h1>tools</h1>
    </div>
    <div class="main">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="username"
            label="用户名"
            placeholder="用户名"
            autocomplete="username"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            autocomplete="current-password"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit" :loading="loading">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
    <div class="bottom-box">
      <a class="bottom-text" href="https://beian.miit.gov.cn">浙ICP备20014065号-1</a>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'
import { login } from '@/requests/remindItem'

const username = ref('')
const password = ref('')
const loading = ref(false)
const router = useRouter()
const route = useRoute()

// 从 URL 参数获取用户名和密码
onMounted(() => {
  username.value = route.query.username || ''
  password.value = route.query.password || ''

  if (username.value && password.value) {
    onSubmit()
  }

  const user = JSON.parse(sessionStorage.getItem('user'))
  if (user) {
    router.push('/main')
  }
})

const onSubmit = async () => {
  try {
    loading.value = true
    const res = await login({ username: username.value, password: password.value })
    if (res.code === 200) {
      sessionStorage.setItem('user', JSON.stringify(res.data))
      showToast({
        type: 'success',
        message: '登录成功',
        duration: 1500
      })
      router.push('/main')
    } else {
      showToast({
        type: 'fail',
        message: res.message || '用户名或密码错误',
        duration: 1500
      })
    }
  } catch (error) {
    if (error.response) {
      // 服务器返回了错误状态码
      showToast({
        type: 'fail',
        message: error.response.data.message || '用户名或密码错误',
        duration: 1500
      })
    } else {
      // 网络错误或其他错误
      showToast({
        type: 'fail',
        message: '网络错误，请稍后重试',
        duration: 1500
      })
    }
    console.error('登录错误:', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
.common-layout {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  position: relative;
  padding-bottom: 50px;
}

.header {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  padding: 20px;
}

.main {
  margin-top: 50px;
  padding: 20px;
  height: calc(100% - 200px);
  overflow-y: auto;
}

.bottom-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #fff;
  z-index: 1;

  .bottom-text {
    color: #bbb;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    line-height: 39px;
    display: block;
  }
}
</style>
